<template>
    <div>
        <el-dialog
  :title="this.idis.id ? '修改菜单' : '创建菜单' "
  :visible.sync="centerDialogVisible"
  :before-close="close"
  width="60%"
  center>

  

  <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
    
  <el-form-item label="用户名" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>


<el-form-item label="权限分配" >
 <el-tree  ref="tree" :data="departs" :props="defaultProps" :default-expand-all="true"  show-checkbox
 @check="handleCheckChange" node-key="id" :default-expanded-keys="[0]" :default-checked-keys="form.permissions" >
          <el-row slot-scope="{ data }" type="flex" justify="space-between" align="middle" style="width: 100%" v-model="form.permissions">
            <el-col :style="[{fontSize: '18px'}]">
              <span >{{ data.title }}</span>
            </el-col>
          </el-row>       
</el-tree>
        </el-form-item>
    


</el-form>


  <span slot="footer" class="dialog-footer">
    <el-button @click="quxiao">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>

    </div>
</template>

<script>
// import {add , update } from '../../api/base/users'
import { detail, update, add } from '../../api/base/permissions'
import { list } from '@/api/base/menus.js'
let _this = []
export default {
    name: 'qeqeqeqe',

    data() {

        return {
             centerDialogVisible: false,

              form: {
        },
        rules: {
          title: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
          ],
          
        },
        permissions:[],
        // defaultProps: {
        // label: 'title'
        // },
        treeCheckedNodes: [],
        PermissionGroupsmenu: [],

        
        defaultProps: {
        label: 'title',
        children: 'childs',
      },
       departs: [],
      props:{
        label:'title',// 指明 具体某一个字段的值 作为label展示
        children: 'childs',
      },

      checklist:[],

       idis:[]
        };
        
    },

    mounted() {
         this.list()
    },
    watch:{
       centerDialogVisible(val){
          this.idis = JSON.parse(JSON.stringify(this.form))
       }
    },
    computed: {
     treeData () {
     function createNode (item) {
      // 复选框选择
        let checked = false
        let selected = false
        if (_this !== null && _this.form.permissions.length > 0) {
          const per = _this.form.permissions.find(function (value, index) {
            return value === item.id
          })
          selected = !!per
        }
         // 标记勾选
        if (selected) {
          const isPoint = item.childs === undefined && item.points === undefined
          const hasChilds = item.childs !== undefined && item.childs.length > 0
          const hasPoints = item.points !== undefined && item.points.length > 0
          if (isPoint) {
            checked = true
          } else if (hasPoints) {
            checked = false
          } else if (hasChilds) {
            checked = false
          } else {
            checked = true
          }
        }
        return {
          id: item.id === undefined ? 0 : item.id,
          title: item.title,
          children: [],
          selected: selected,
          checked: checked
        }
     }
       function parseNodes (nodes, parentNode) {
        for (const it of nodes) {
          const node = createNode(it)
          // 标记选中
          // console.log(node.checked)
          if (node.checked) {
            parentNode.selected = true
          }
          if (it.childs !== undefined && it.childs.length > 0) {
            parseNodes(it.childs, node)
          } else if (it.points !== undefined && it.points.length > 0) {
            parseNodes(it.points, node)
          }
          parentNode.children.push(node)
        }
      }
          // const nodes = createNode({ title: '系统菜单和页面权限点', expand: true })
          // parseNodes(this.PermissionGroupsmenu, nodes)
          // return [nodes]
     }
    },



    methods: {
          // 清空表格
    close(){
      this.centerDialogVisible = false
      this.$refs.form.resetFields()
    //   this.fileList = []
      this.form={}
      this.$refs.tree.getCheckedNodes() 
    //   console.log(this.form,'为什么清空不生效,生效啦');
    },
   quxiao(){
     this.close() 
 

    // const list4 = {...this.form}
    // console.log(list4);
    //   console.log(this.form)
    //   this.checklist = this.$refs.tree.getCheckedNodes()
    //   console.log(this.checklist);
    //  let newArr = []
    //  let findCan = function (V) {
    //     V.forEach(item => {
    //       if (item.id > 0 ) {
    //         newArr.push(item.id)
    //       }
    //       if (item.childs) {
    //         findCan(item.childs)
    //       }
    //     })
    //  }
    //  findCan(this.checklist) 
    //     console.log(newArr);
    //   // this.form.push(newArr)
    //   const list3 = {title: "11", permissions:[]}
    //   list3.title = list4.title
    //   list3.permissions = newArr 
    //   console.log(list3);
    //   this.form = list3
    //   console.log(this.form)


   },

     async submit(){
       const list4 = {...this.form}
      //  this.idis = JSON.parse(JSON.stringify(this.form.id))
      this.checklist = this.$refs.tree.getCheckedNodes()
     let newArr = []
     let findCan = function (V) {
        V.forEach(item => {
          if (item.id > 0 ) {
            newArr.push(item.id)
          }
          if (item.childs) {
            findCan(item.childs)
          }
        })
     }
     findCan(this.checklist) 
      // this.form.push(newArr)
      const list3 = {title: "11", permissions:[]}
      list3.title = list4.title
      list3.permissions = newArr 
      this.form = list3
      this.form.title = list4.title
       console.log(this.form)


      await this.$refs.form.validate()
      console.log(this.form)
      console.log(this.idis)
       this.idis.id ? await update({id:this.idis.id,...this.form}) : await add({...this.form,title: this.form.title,permissions:this.form.permissions })   
       this.$message.success(`${this.idis.id ? '编辑' : '新增'}成功`)
       this.close()
       this.centerDialogVisible = false
           this.$parent.list()
           
       },

        // 节点复选框被选中
    handleCheckChange (data, checked, indeterminate) {
      this.treeCheckedNodes = checked.checkedNodes
    },

     async list(){
      const res =  await list()
        // console.log(res.data,'111111111')
        const list2 = [{id:-1,pid:null,title:'系统菜单和页面权限点',childs:[]}]
        list2[0].childs = res.data
        this.departs = list2
      // console.log(this.departs);
      },

      

    },
};
</script>

<style lang="scss" scoped>

</style>